<template>
  <!-- 首页产品分类 -->
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item prop="typeName">
        <el-input v-model="queryParams.typeName" placeholder="类型名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          查询
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="add-box">
      <el-button type="primary" plain size="mini" @click="addType">添加分类</el-button>
      <el-button type="warning" plain size="mini" @click="handleDel()">删除分类</el-button>
    </div>
    <!-- 表格 -->
    <el-table v-loading="loading" border :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="类型名称" align="center" prop="typeName" />
      <el-table-column label="类型序号" align="center" prop="sort" />
      <el-table-column label="类型状态" align="center" prop="status">
        <template slot-scope="scope">
          {{ scope.row.status | ctHomeProductType }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button type="text" size="mini" @click="handleDel(scope.row)">删除</el-button>
          <el-button type="text" size="mini" @click="handleView(scope.row)">查看</el-button>
          <el-button type="text" size="mini" @click="addChild(scope.row)">添加子类</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页  -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.params.pageNum"
      :limit.sync="queryParams.params.pageSize" @pagination="getList" />

    <!-- 详情 -->
    <el-dialog title="详情" :visible.sync="detailShow" width="50%" :close-on-click-modal="false">
      <el-form :model="detailRow" label-width="100px">
        <div class="flex">
          <el-form-item label="类型名称：">{{ detailRow.typeName || "-" }}</el-form-item>
          <el-form-item label="创建时间：">{{ detailRow.createTime || "无" }}</el-form-item>
        </div>
      </el-form>
      <div v-if="isChildShow">
        <el-button type="primary" plain size="mini" @click="addChild(detailRow)">添加子类</el-button>
        <el-button type="warning" plain size="mini" @click="handleDelChild(detailRow)"
          style="margin-bottom: 10px;">删除子类</el-button>
        <el-table v-loading="loading" border :data="childList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column label="类型名称" align="center" prop="typeName" />
          <el-table-column label="类型序号" align="center" prop="sort" />
          <el-table-column label="类型状态" align="center" prop="status">
            <template slot-scope="scope">
              {{ scope.row.status | ctHomeProductType }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="handleChildUpdate(scope.row)">修改</el-button>
              <el-button type="text" size="mini" @click="handleDelChild(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-button @click="detailShow = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加 & 修改 分类 -->
    <el-dialog :title="addForm.id ? '修改分类' : '添加分类'" :visible.sync="addShow" width="40%" :close-on-click-modal="false">
      <el-form ref="addForm" :model="addForm" label-width="100px" :rules="rules">
        <el-form-item label="类型名称" prop="typeName">
          <el-input v-model="addForm.typeName"></el-input>
        </el-form-item>
        <el-form-item label="类型序号" prop="sort">
          <el-input v-model="addForm.sort"></el-input>
        </el-form-item>
        <el-form-item label="类型状态" prop="status">
          <el-radio-group v-model="addForm.status">
            <el-radio label="1">激活</el-radio>
            <el-radio label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="addHandleSure">确 定</el-button>
        <el-button @click="cancelForm('addForm')">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加 & 修改子类 -->
    <el-dialog :title="addChildForm.parentId ? '添加子类' : '修改子类'" :visible.sync="addChildShow" width="40%" :close-on-click-modal="false">
      <el-form ref="addChildForm" :model="addChildForm" label-width="100px" :rules="rules">
        <el-form-item label="类型名称" prop="typeName">
          <el-input v-model="addChildForm.typeName"></el-input>
        </el-form-item>
        <el-form-item label="类型序号" prop="sort">
          <el-input v-model="addChildForm.sort"></el-input>
        </el-form-item>
        <el-form-item label="类型状态" prop="status">
          <el-radio-group v-model="addChildForm.status">
            <el-radio label="1">激活</el-radio>
            <el-radio label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="addChildHandleSure">确 定</el-button>
        <el-button @click="cancelAddChild('addChildForm')">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { homeProductTypeList, addHomeProductType, updateHomeProductType, delHomeProductType, childrenList } from "@/api/configManagement/homeProductType";

export default {
  data() {
    return {
      loading: false, // 遮罩层
      showSearch: true, // 显示搜索条件
      total: 0, // 总条数
      dataList: [], // 充值管理表格数据
      // 查询参数
      queryParams: {
        params: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      detailRow: {},//详情内容
      detailShow: false,//详情弹窗开关
      addShow: false,//添加弹窗开关
      addForm: {},//添加的内容
      addChildShow: false,//添加子类弹窗开关
      addChildForm: {},//添加子类的内容
      rules: {//添加表单验证
        typeName: [
          { required: true, message: '请输入类型名称', trigger: 'change' }
        ],
        sort: [
          { required: true, message: '请输入类型序号', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择类型状态', trigger: 'change' }
        ],
      },
      ids: [],//删除数据id集合
      childList: [],//子类列表
      isChildShow: false,//是否展示子类列表
    };
  },
  created() {
    //获取表格数据
    this.getList();
  },
  methods: {
    /**打开修改子类弹窗 */
    handleChildUpdate(row) {
      this.addChildShow = true;
      this.addChildForm = Object.assign({}, row);
    },
    /**打开添加子类弹窗 */
    addChild(row) {
      this.resetForm('addChildForm');
      this.addChildShow = true;
      this.addChildForm = {};
      this.addChildForm.parentId = row.id;
    },
    /**确认添加子类 */
    addChildHandleSure() {
      this.$refs['addChildForm'].validate((valid) => {
        if (valid) {
          let axios = this.addChildForm.id ? updateHomeProductType : addHomeProductType;
          axios(this.addChildForm).then(res => {
            if (200 == res.code) {
              this.getList(this.addChildForm);
              this.getChildList(this.addChildForm.parentId);
              this.addChildShow = false;
              this.$message.success(this.addChildForm.id ? '修改子类成功' : '添加子类成功');
            }
          })
        }
      });
    },
    /**关闭子类弹窗 */
    cancelAddChild() {
      this.addChildShow = false;
      this.resetForm('addChildForm');
    },
    /**多选 */
    handleSelectionChange(val) {
      this.ids = val.map(item => item.id);
    },
    /**删除子类 */
    handleDelChild(row) {
      let id = row.parentId == '0' ? this.ids : [row.id];
      let parentId = row.parentId == '0' ? row.id : row.parentId;
      this.$modal.confirm(`是否确认删除该分类?`).then(() => {
        delHomeProductType(id).then(res => {
          if (200 == res.code) {
            this.getList(row);
            this.getChildList(parentId);
            this.$message.success('删除成功！');
          }
        })
      }).catch(() => { });
    },
    /**删除分类 */
    handleDel(row) {
      let id = row ? [row.id] : this.ids;
      this.$modal.confirm(`是否确认删除该分类?`).then(() => {
        delHomeProductType(id).then(res => {
          if (200 == res.code) {
            this.getList(row);
            this.$message.success('删除成功！');
          }
        })
      }).catch(() => { });
    },
    /**打开修改弹窗 */
    handleUpdate(row) {
      this.addShow = true;
      this.addForm = Object.assign({}, row);
    },
    /**打开添加弹窗 */
    addType() {
      this.resetForm('addForm');
      this.addShow = true;
      this.addForm = {};
    },
    /**确认添加 & 修改 */
    addHandleSure() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          let axios = this.addForm.id ? updateHomeProductType : addHomeProductType;
          axios(this.addForm).then(res => {
            if (200 == res.code) {
              this.getList(this.addForm);
              this.addShow = false;
              this.$message.success(this.addForm.id ? '修改类型成功' : '添加分类成功');
            }
          })
        }
      });
    },
    /**关闭添加 & 修改对话框 */
    cancelForm() {
      this.addShow = false;
      this.resetForm('addForm');
    },
    /**查看详情 */
    handleView(row) {
      this.childList = [];
      this.detailRow = Object.assign({}, row);
      this.detailShow = true;
      this.isChildShow = this.detailRow.haveChildren == 1 ? true : false;
      if (1 == row.haveChildren) {
        this.getChildList(row.id)
      }
    },
    /**查询子类列表 */
    getChildList(parentId) {
      childrenList({ parentId }).then(res => {
        if (200 == res.code) {
          this.childList = res.data;
        }
      })
    },
    /** 查询首页产品分类列表 */
    getList(row) {
      this.loading = true;
      homeProductTypeList(this.queryParams)
        .then((res) => {
          this.dataList = res.rows;
          this.total = res.total;
          if (!row) return
          if (row.parentId == 0) {
            this.isChildShow = this.dataList.find(item => item.id == row.id)?.haveChildren == 1 ? true : false;
          } else {
            this.isChildShow = this.dataList.find(item => item.id == row.parentId)?.haveChildren == 1 ? true : false;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.params.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>

<style lang="scss" scoped>
.add-box {
  margin-bottom: 20px;
}

.flex {
  display: flex;

  >div {
    flex: 1;
  }
}

.el-select {
  width: 100%;
}
</style>
